<template>
  <div class="searchList">
      <ul class="tagList">
        <div>
            <router-link active-class="active" :to="{path:'unity'}" tag="li" class="tag">综合</router-link>
            <router-link active-class="active" :to="{path:'drama'}" tag="li" class="tag">剧集({{numList[3]?numList[3].total:0}})</router-link>
            <router-link active-class="active" :to="{path:'live'}" tag="li" class="tag">直播({{numList[4]?numList[4].total:0}})</router-link>
            <router-link active-class="active" :to="{path:'albums'}" tag="li" class="tag">音单({{numList[1]?numList[1].total:0}})</router-link>
            <router-link active-class="active" :to="{path:'up'}" tag="li" class="tag">UP主({{numList[0]?numList[0].total:0}})</router-link>
            <router-link active-class="active" :to="{path:'actor'}" tag="li" class="tag">声优({{numList[2]?numList[2].total:0}})</router-link>
            <router-link active-class="active" :to="{path:'channel'}" tag="li" class="tag">频道({{numList[5]?numList[5].total:0}})</router-link>
        </div>
      </ul>
      <div class="tabContent">
          <router-view :zoneList="zoneList"></router-view>
      </div>
      <slot></slot>
  </div>
</template>

<script>
import BScroll from "better-scroll"
import { get } from "util/http"
export default {
    data(){
        return {
            numList:[],
            zoneList:{}
        }
    },
    async mounted(){
        let zone_result=await get({
            url:"/ajax/sound/getsearch",
            params:{
                s:this.$route.params.keyword,
                type:3,
                page_size:10,
                p:1
            }
        })
        this.zoneList=zone_result.info
        this.numList=this.zoneList.navs
        await this.$nextTick()
        new BScroll('.tagList',{
            scrollX:true,
            bounce:false
        })
    }
}
</script>

<style lang="stylus" scoped>
.searchList
    min-height:calc(100vh - 1.2rem)
    .tagList
        width 100%
        display -webkit-box
        >div
            display flex
            background #fff
            border-bottom 1px solid #e0e0e0
            height .4rem
            font-size .14rem
            justify-content space-between
            text-align center
            width auto
            white-space nowrap
        .tag
            display flex
            align-items center
            flex-shrink 0
            flex-wrap nowrap
            padding 0 .15rem
            font-size .14rem
            transition color .2s ease,border-color .2s ease
            color #9e9e9e
            position relative
            height 100%
            &:after
                content ""
                display block
                width .74rem
                height 100%
                position absolute
                bottom 0
                left 0
                right 0
                margin 0 auto
                border-bottom 2px solid transparent
                min-width .5rem
                width calc(100% - 0.4rem)
            &.active
                color #000
                border-color #000
                &:after
                    color #000
                    border-color #000
    .tabContent
        min-height calc(100vh - 1.5rem)
        display flex
        flex-direction column
</style>